﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Slideshow.ascx.cs" Inherits="Controls_Slideshow" %>

<div id="bigPic"> 
    <asp:Image runat="server" ID="imgSlideShow1" Width="725px" Height="250px" />
    <asp:Image runat="server" ID="imgSlideShow2" Width="725px" Height="250px" />
    <asp:Image runat="server" ID="imgSlideShow3" Width="725px" Height="250px" />
    <asp:Image runat="server" ID="imgSlideShow4" Width="725px" Height="250px" />
    <asp:Image runat="server" ID="imgSlideShow5" Width="725px" Height="250px" />
    <asp:Image runat="server" ID="imgSlideShow6" Width="725px" Height="250px" />
    <asp:Image runat="server" ID="imgSlideShow7" Width="725px" Height="250px" />
    <asp:Image runat="server" ID="imgSlideShow8" Width="725px" Height="250px" />
    <asp:Image runat="server" ID="imgSlideShow9" Width="725px" Height="250px" /> 
    <asp:Image runat="server" ID="imgSlideShow10" Width="725px" Height="250px" />        
</div> 
 <div id="slideshow">
    <ul id="thumbs"> 
        <li class="active" rel="1">1</li> 
        <li rel="2">2 </li> 
        <li rel="3">3 </li> 
        <li rel="4">4 </li> 
        <li rel="5">5</li> 
        <li rel="6">6</li> 
        <li rel="7">7</li>
        <li rel="8">8</li> 
        <li rel="9">9</li> 
        <li rel="10">10</li> 
    </ul>
</div>

<script type="text/javascript">
    var currentImage;
    var currentIndex = -1;
    var interval;
    function showImage(index) {
        if (index < $('#bigPic img').length) {
            var indexImage = $('#bigPic img')[index]
            if (currentImage) {
                if (currentImage != indexImage) {
                    $(currentImage).css('z-index', 2);
                    clearTimeout(myTimer);
                    $(currentImage).fadeOut(250, function () {
                        myTimer = setTimeout("showNext()", 4000);
                        $(this).css({ 'display': 'none', 'z-index': 1 })
                    });
                }
            }
            $(indexImage).css({ 'display': 'block', 'opacity': 1 });
            currentImage = indexImage;
            currentIndex = index;
            $('#thumbs li').removeClass('active');
            $($('#thumbs li')[index]).addClass('active');
        }
    }

    function showNext() {
        var len = $('#bigPic img').length;
        var next = currentIndex < (len - 1) ? currentIndex + 1 : 0;
        showImage(next);
    }

    var myTimer;

    $(document).ready(function () {
        myTimer = setTimeout("showNext()", 4000);
        showNext(); //loads first image
        $('#thumbs li').bind('click', function (e) {
            var count = $(this).attr('rel');
            showImage(parseInt(count) - 1);
        });
    });
                
                
</script>	